<template>
  <div class="main-tabs gap-row-6" :class="{ 'justify-center': center }">
    <div
      v-for="option in options"
      class="tab gap-col-3 pointer"
      :class="{ active: option[optionValue] === modelValue }"
      :key="option[optionValue]"
      @click="onClick(option[optionValue])"
    >
      <div class="label font-size-16">{{ $t(option[optionLabel]) }}</div>
      <div class="index">
        <div class="index-1"></div>
        <div class="index-2"></div>
        <div class="index-3"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { $t } from '@/i18n'

defineProps({
  modelValue: { required: true },
  options: { type: Array, required: true },
  optionLabel: { type: String, default: 'label' },
  optionValue: { type: String, default: 'value' },
  center: { type: Boolean, default: false },
})

const emits = defineEmits(['update:modelValue'])

function onClick(v) {
  emits('update:modelValue', v)
}
</script>

<style lang="scss" scoped>
.main-tabs {
  height: 2.25rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;

  .tab {
    height: 2.25rem;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .label {
      height: 1.375rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .index {
      width: 1.5625rem;
      height: 0.25rem;
      border-radius: 1rem;
      position: relative;
      .index-1,
      .index-2,
      .index-3 {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform 0.3s;
        transform: scaleX(0);
        transform-origin: right;
      }

      .index-1 {
        transition-delay: 0.1s;
        background: #f82597;
      }
      .index-2 {
        transition-delay: 0.05s;
        background: #ff8d23;
      }
      .index-3 {
        transition-delay: 0;
        background: linear-gradient(
          180deg,
          rgb(var(--v-theme-primary-gradient-from)) 0%,
          rgb(var(--v-theme-primary-gradient-to)) 100%
        );
        filter: drop-shadow(0 0 0.4375rem rgba(255, 15, 0, 0.68));
      }
    }

    &.active {
      .label {
        // 這個設置可能太潮了，好像不是每個設備都可以正常顯示，只有 chrome 開啟的 iphone 模擬器正常顯示
        // background: linear-gradient(
        //   180deg,
        //   rgb(var(--v-theme-primary-gradient-from)) 0%,
        //   rgb(var(--v-theme-primary-gradient-to)) 100%
        // );
        // -webkit-background-clip: text;
        // background-clip: text;
        // -webkit-text-fill-color: transparent;

        // 為求保險還是先用 color 就好
        color: rgb(var(--v-theme-primary));
        text-shadow: 0 0 0.4375rem rgba(255, 15, 0, 0.68);
      }

      .index {
        .index-1,
        .index-2,
        .index-3 {
          transform: scaleX(1);
        }
        .index-1 {
          transition-delay: 0;
        }
        .index-2 {
          transition-delay: 0.05s;
        }
        .index-3 {
          transition-delay: 0.1s;
        }
      }
    }
  }
}
</style>
